<template>
   <view class="uv-page">
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">基本案例</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__image-item">
               <uv-image
                  :showLoading="true"
                  :src="src"
                  width="80px"
                  height="80px"
                  @click="click"
               ></uv-image>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义形状</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__image-item">
               <uv-image shape="circle" :src="src" width="80px" height="80px"></uv-image>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义圆角</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__image-item">
               <uv-image radius="4" :src="src" width="80px" height="80px"></uv-image>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">图片模式(widthFit)</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__image-item">
               <uv-image :src="src" width="80px" height="80px" mode="widthFix"></uv-image>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义图片加载插槽</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__image-item">
               <uv-image :src="src1" width="80px" height="80px" mode="widthFix">
                  <template v-slot:loading>
                     <uv-loading-icon color="red"></uv-loading-icon>
                  </template>
               </uv-image>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title"
            >observer懒加载，滑动到可视范围才会请求图片哟，nvue不生效</text
         >
         <view class="uv-demo-block__content">
            <view class="uv-page__image-item">
               <uv-image
                  src="https://images.xxapi.cn/images/jk/image_448_7033a4a8.jpg"
                  width="80px"
                  height="80px"
                  mode="widthFix"
                  :observeLazyLoad="true"
               >
                  <template v-slot:loading>
                     <uv-loading-icon color="red"></uv-loading-icon>
                  </template>
               </uv-image>
            </view>
         </view>
      </view>
   </view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';

const src = 'https://images.xxapi.cn/images/jk/image_1032_2fdf55dd.jpg';
const src1 = ref('');

const click = () => {
   console.log('点击了图片');
};

onLoad(() => {
   setTimeout(() => {
      src1.value = src;
   }, 3000);
});
</script>

<style lang="scss" scoped></style>
